<template>
    <div class="body">
      <div class="pannel-title">
            <div>操作日志</div>
        </div>
        <div class="filter-box">
            <a-select v-model:value="grid03.pageData.operType" style="width: 120px;margin-right:15px;">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="Create">创建</a-select-option>
                <a-select-option value="Edit">编辑</a-select-option>
                <a-select-option value="Delete">删除</a-select-option>
                <a-select-option value="Login">登录</a-select-option>
                <a-select-option value="Other">其他</a-select-option>
            </a-select>
          <a-input-search v-model:value="grid03.pageData.keywords" placeholder="搜索关键字(操作人用户名)" style="width: 200px;margin-right:10px" />
          <a-range-picker :placeholder="['开始时间', '结束时间']" format="YYYY-MM-DD" v-model:value="date" @change='onDateChange'/>
          <a class="download-btn" @click='reset'>
            <span>重置</span>
          </a>
          <a class="download-btn" style="background:#4687FF;color:#fff;margin-right: 10px;" @click='serach'>
            <span>查询</span>
          </a>
      </div>
      <!-- 单位管理 -->
        <div class="card" >
          <Grid :gridDatas='grid03' v-on:getTeg="doTheThing($event,this)" v-on:changePage='onChangePage($event,this)'></Grid>
        </div>
    </div>
</template>

<script>
import Grid from "@/components/gridBody";
import httpRequest from "@/util/httpRequest";
import { useStore } from "vuex";
export default {
  name: "logs",
  components: {
    Grid
  },
  data() {
    return {
      date:null,
      grid03: {
        pageData: {
          gridType: 1,
          total: 0,
          current: 1,
          pageSize: 10,
          keywords: "", // 搜索关键字
          beginTime: "", // 开始时间
          endTime: "", // 结束时间
          operType: "", // 结束时间
          pageNo: 1,
        //   showTotal: (total) => `共计：${total}条日志`
        },
        title: "",
        data: [],
        columns: [
          {
            title: "操作者账号",
            dataIndex: "loginId",
            key: "loginId"
          },
          {
            title: "操作者用户名",
            dataIndex: "name",
            key: "name"
          },
          {
            title: "操作类型",
            dataIndex: "operType",
            key: "operType",
            slots: {
              customRender: "operType"
            }
          },
          {
            title: "产生时间",
            key: "createTime",
            dataIndex: "createTime"
          },
          {
            title: "操作",
            key: "action",
            slots: {
              customRender: "action"
            }
          }
        ]
      }
    };
  },
  mounted() {
    const store = useStore();
    store.dispatch("setBreadcrumb", { text: "操作日志", isBack: false });
    this.thisPostList();
  },
  methods: {
    doTheThing: (e, that) => {
      that.$router.push({ name: "操作日志详情", params: { id: e.id } });
    },
    onChangePage: (teg, that) => {
      that.grid03.pageData = teg;
      that.thisPostList(teg.gridType);
    },
    thisPostList() {
      httpRequest.post("管理员操作日志列表", this.grid03.pageData).then(res => {
        this.grid03.data = res.data.list;
        this.grid03.pageData.current = this.grid03.pageData.pageNo =
          res.data.pageNo;
        this.grid03.pageData.total =
          res.data.pages * this.grid03.pageData.pageSize;
      });
    },
    reset(){
      this.date = this.grid03.pageData.keywords = this.grid03.pageData.beginTime = this.grid03.pageData.endTime = '';
      this.thisPostList();
    },
    serach(){
      this.thisPostList();
    },
    onDateChange(date,dateString){
      this.grid03.pageData.beginTime = dateString[0];
      this.grid03.pageData.endTime = dateString[1];
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  padding: 30px;
  background: #fff;
  .card {
    width: 100%;
  }
}
</style>
